<template>
  <div class="queryData">
    <div class="queryItem">
      <div class="spanname">昵称</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入昵称"
        />
      </div>
    </div>
    <div class="queryItem">
      <div class="spanname">用户名</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入用户名"
        />
      </div>
    </div>
    <div class="queryItem">
      <div class="spanname">电话</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入电话"
        />
      </div>
    </div>
    <div class="queryItem">
      <div class="spanname">邮箱</div>
      <div class="inp">
        <el-input
          v-model="input"
          style="width: 450px"
          placeholder="请输入邮箱"
        />
      </div>
    </div>
  </div>
  <div class="operition">
    <el-button type="primary" class="reset" @click="createOrder"
      >新建</el-button
    >

    <el-button type="primary" class="reset">搜索</el-button>
    <el-button type="info" class="reset">重置</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="user_id" label="用户ID" width="100" />
    <el-table-column prop="user_phone" label="用户手机" width="120" />
    <el-table-column prop="start_station_name" label="起始站名" width="120" />

    <el-table-column prop="departure_time" label="发车时间" width="200" />

    <el-table-column prop="seat_type" label="座位类型" width="120" />
    <el-table-column prop="seat_num" label="座位编号" width="120" />
    <el-table-column prop="price" label="座位价格" width="120" />
    <el-table-column prop="is_depart" label="是否发车" width="120" />
    <el-table-column prop="is_pay" label="是否支付" width="120" />
    <el-table-column prop="is_cancel" label="是否取消" width="120" />
    <el-table-column prop="end_station_name" label="终点站名" width="120" />
    <el-table-column prop="arrival_time" label="到达时间" width="200" />

    <el-table-column prop="created_time" label="创建时间" width="200" />
    <el-table-column prop="updated_time" label="修改时间" width="200" />

    <el-table-column fixed="right" label="操作" min-width="350">
      <template #default="{ row }">
        <el-button type="primary" size="small" @click="canclePay(row)">
          取消订单
        </el-button>
        <el-button type="danger" size="small" @click="del(row)">删除</el-button>
        <el-button type="danger" size="small" @click="pay(row)">支付</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalPageSize"
    />
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="新建订单"
    width="500"
    :before-close="handleClose"
  >
    <el-form :inline="true" :model="OrderForm" class="demo-form-inline">
      <el-form-item label="用户id">
        <el-input
          v-model="OrderForm.user_id"
          placeholder="请输入用户id"
          clearable
        />
      </el-form-item>
      <el-form-item label="形式计划id">
        <el-input
          v-model="OrderForm.schedule_id"
          placeholder="请输入形式计划id"
          clearable
        />
      </el-form-item>
      <el-form-item label="起始站id">
        <el-input
          v-model="OrderForm.start_station_id"
          placeholder="请输入起始站id"
          clearable
        />
      </el-form-item>
      <el-form-item label="终点站id">
        <el-input
          v-model="OrderForm.end_station_id"
          placeholder="请输入终点站id"
          clearable
        />
      </el-form-item>
      <el-form-item label="座位类型">
        <el-input
          v-model="OrderForm.seat_type"
          placeholder="请输入座位类型"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreateOrder"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import pinia from "@/store";
import { ElMessage } from "element-plus";

import { getDelectOrderApi } from "@/api/order.js";
import { getPayOrderApi } from "@/api/order.js";
import { getCancleOrderApi } from "@/api/order.js";

import { getOrderListApi } from "@/api/order.js";
import { getCreateOrderApi } from "@/api/order.js";

import useCounter from "@/store/counter";
import { Loading } from "element-plus/es/components/loading/src/service";
const counterStore = useCounter(pinia);
const handleClick = () => {
  console.log("click");
};

// 创建订单
import { ElMessageBox } from "element-plus";
const OrderForm = reactive({
  schedule_id: null,
  user_id: null,
  start_station_id: null,
  end_station_id: null,
  seat_type: "",
});
const dialogVisible = ref(false);
const createOrder = () => {
  dialogVisible.value = true;
};
const handleCreateOrder = async () => {
  dialogVisible.value = false;
  const params = {
    schedule_id: OrderForm.schedule_id,
    user_id: OrderForm.user_id,
    start_station_id: OrderForm.start_station_id,
    end_station_id: OrderForm.end_station_id,
    seat_type: OrderForm.seat_type,
  };
  const res = await getCreateOrderApi(params);
  console.log("创建订单的反馈", res);
  if ((res.message = "success")) {
    OrderData();
    ElMessage({
      message: "生成新订单！",
      type: "success",
    });
  } else {
    ElMessage({
      message: "订单创建失败！请重试",
      type: "error",
    });
  }
};
const handleClose = (done) => {
  ElMessageBox.confirm("您确定要关闭吗?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
// 获取列表部分
const tableData = ref([]);
const totalPageSize = ref(10);
const OrderData = async () => {
  try {
    const params = {};
    const res = await getOrderListApi(params);
    console.log("获取订单", res);
    tableData.value = res.data.list;
    totalPageSize.value = res.data.total_size;
  } catch (error) {
    console.log(error);
  }
};

onMounted(OrderData);
// 删除用户
const del = async (record) => {
  console.log("每条数据", record);
  try {
    const params = {
      uuid: record.uuid,
    };
    console.log("uuid", record.uuid);
    const res = await getDelectOrderApi(params);
    console.log(res);
    if ((res.message = "success")) {
      OrderData();
      ElMessage({
        message: "删除成功！",
        type: "success",
      });
    } else {
      ElMessage({
        message: "删除失败！请重试",
        type: "error",
      });
    }
  } catch (error) {
    console.log(error);
  }
};
// 支付订单
const pay = async (record) => {
  console.log("每条数据", record);
  try {
    const params = {
      uuid: record.uuid,
    };
    console.log("uuid", record.uuid);
    const res = await getPayOrderApi(params);
    console.log(res);
    if ((res.message = "success")) {
      OrderData();
      ElMessage({
        message: "订单支付成功！",
        type: "success",
      });
    } else {
      ElMessage({
        message: "订单支付失败！请重试",
        type: "error",
      });
    }
  } catch (error) {
    console.log(error);
  }
};

// 支付取消
const canclePay = async (record) => {
  console.log("每条数据", record);
  try {
    const params = {
      uuid: record.uuid,
    };
    console.log("uuid", record.uuid);
    const res = await getCancleOrderApi(params);
    console.log(res);
    if ((res.message = "success")) {
      OrderData();
      ElMessage({
        message: "取消订单成功！",
        type: "success",
      });
    } else {
      ElMessage({
        message: "取消订单失败！请重试",
        type: "error",
      });
    }
  } catch (error) {
    console.log(error);
  }
};
</script>
<style lang="scss" scoped>
.queryData {
  display: flex;
  flex: 1;
  width: 100%;
  flex-wrap: wrap;
}
.queryItem {
  width: 500px;
  height: 30px;
  line-height: 30px;
  margin: 5px 15px;
  display: flex;
}
.spanname {
  height: 30px;
  width: 70px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #bbbfc3;
}
.inp {
  width: 240px;
}
.operition {
  display: flex;
  margin-top: 10px; // 这个可以添加一些与上方容器的间距
  // margin-left: 1070px; // 将按钮推到右边
  margin-bottom: 20px;
}
.pagination {
  margin-left: 90%;
}
</style>
